$(function(){


    // 读取数据库商品
    $.get('php/paging.php',res=>{
        var {meta:{status,msg},data} = res;
        console.log(data);
        
        if(status===1){
            // var html = '';
            // data.forEach(item=>{
            //     html += `
            //     <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
            //         <div class="thumbnail">
            //             <img src="${item.img}" alt="...">
            //             <div class="caption">
            //             <h3 class="goodsname">${item.name}</h3>
            //             <p class="description">${item.description}</p>
            //             <p><a href="#" class="btn btn-primary" role="button">查看详情</a> <a href="#" class="btn btn-default" role="button">立即购买</a></p>
            //             </div>
            //         </div>
            //     </div>
            //     `
            // })

            // 使用分页
            var pageSize = 12
            var p = new Page('page',{
                /*language:{
                    first:"|<<",
                    prev:"<<",
                    next:">>",
                    last:">>|"
                },*/
                pageData:{
                    total:data.length,
                    pageSize
                },
                show:function(currentPage){
                   var brr = data.slice((currentPage-1)*pageSize,currentPage*pageSize)
                   var str = '';
                   brr.forEach(item=>{
                       str += `
                       <div class="commodity-info">
                    <div class="info-top">
                    
                        <img src="${item.img}" alt="">
                        <p>${item.name}</p>
                        <div class="mark">
                        <span>&nbsp;${item.description}</span>
                        </div>
                    </div>
                    <div class="info-bottom">
                        <div class="time-count">
                            <p>199天历史最低价</p>
                        </div>
                        <div class="product-info">
                            <p><i>￥</i><b>${parseInt(item.price*0.7-0) }</b>&nbsp;<span>${item.price}</span></p>
                            <div> 已售38%&nbsp;
                                <span class="progress"><span class="progressBar"></span></span>
                            </div>

                        </div>
                        <div class="purchase-box">
                            <a href="./details.html?id=${item.id}" class="purchase">立即抢购</a>
                        </div>
                    </div>
                </div>
                       `
                   })
                   $('.row').html(str)
                }
            })

        }
    },'json')
})